<!DOCTYPE html>
<html>
<head>
	<title>test jQuery</title>
	<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	/*
	window.onload = function(){
		$(".show_action").click(function(){$(this).slideUp("slow");});
	}*/
	function ary_equ(a0,a1){
		if(a0.length !== a1.length) return false;
		for(i in a0){
			if(a0[i] !== a1[i]) return false;
		}
		return true;
	}
	$(function(){
		//$(".show_action").click(function(){$(this).slideUp("slow")});
		$("#in").bind("my_turn",function(){alert("i am in!");});
		$("#in").click(function(){$(this).trigger("my_turn");});
		$(".show_action").click(function(){
			$("p").animate({
				width:"hide",
				borderLeft:"hide",
				borderRight:"hide",
				paddingLeft:"hide",
				paddingRight:"hide"
			},{
				duration:6000,
				complete:function(){
					$(this).text("Do you happy!!!???");
				},
				step:function(){
					var color = $(this).css("background-color");
					var ca = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/).slice(1);
					var ca_red = ["255","0","0"]
					//alert(color);
					if(!ary_equ(ca,ca_red))
						$(this).css("background-color","rgb(255,0,0)");
					else if(ary_equ(ca,ca_red))
						$(this).css("background-color","rgb(0,255,0)");
				}
			}).animate({
				width:"show",
				borderLeft:"show",
				borderRight:"show",
				paddingLeft:"show",
				paddingRight:"show"
			},{
				duration:6000
			})
		});
	})
	</script>
	<style type="text/css">
	.show_action{
		border: 3px solid red;
		background-color: grey;
	}
	p.show_action,div.show_action{
		width: 300px;
		height: 200px;
	}
	</style>
</head>
<body>
<p class="show_action">hello world</p>
<p>i am p0</p>
<p>i am p1</p>
<p>i am p2</p>
<h1>No contents !!!</h1>
<div class="show_action">
	
	hello DIV
</div>
<p id="in">in div</p>
<p id="out">out div</p>
</body>
</html>